<!-- tree.vue - 树，canvas -->
<template>
    <div class="container">
        <canvas ref='tree-canvas'></canvas>
    </div>
</template>
<style scoped>
    
</style>
<script>
    export default {
        data(){
            return {
                canvas:null, // canvas元素
                width:800, // canvas宽度
                height:600, // canvas高度
                ctx:null , // canvas的绘制上下文
                tree:{ // 树的一些配置
                    angle:30 , // 分叉角度
                    long:90 , // 每支长度
                    color:'#888', // 树枝颜色
                },
                x:100 ,
            }
        },
        methods:{
            init(){ // 初始化canvas状态
                this.canvas = this.$refs['tree-canvas'] ;
                this.canvas.width = this.width ;
                this.canvas.height = this.height ;
                this.canvas.style.background = '#f5f5f5' ;
                if(this.canvas.getContext){
                    this.ctx = this.canvas.getContext('2d') ;
                }else{
                    this.$message('您的浏览器不支持canvas绘画环境');
                }
            },

        },
        mounted(){
            this.init() ;
        }
    }
</script>
